<!--
 Author:aad
 time:24/5/7
 -->
<!-- 热门路线-提交路线订单 -->
<template>
	<view class="content">
		<tui-loading v-if="loadingTips" :isMask="true"></tui-loading>
		<!-- 路线简介 -->
		<view class="Routebrief">
			<!-- 照片、标题、价格 -->
			<view class="picture-title-price">
				<!-- 照片 -->
				<view class="picture">
					<image :src="storageData.themeImg" mode=""></image>
				</view>
				<view class="title-price">
					<view class="title">
						{{ storageData.name }}
					</view>
					<view class="price">
						￥{{ storageData.lineFee }}/人
					</view>
				</view>
			</view>
			<!-- 分割线 -->
			<tui-divider height="35"></tui-divider>
			<!-- 旅行社/机构 -->
			<view class="travelContainer">
				<view class="travel">旅行社/机构</view>
				<view class="HeadPortrait-text">
					<!-- 	<view class="HeadPortrait">
            <image
              src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/1-2-1%E6%99%AF%E7%82%B9%E8%AF%A6%E6%83%85/%E7%8C%AB%E5%A4%B4%E5%83%8F.png">
            </image>
          </view> -->
					<view class="travel-text">{{ storageData.userName }}</view>
				</view>
			</view>
			<!-- 分割线 -->
			<tui-divider height="35"></tui-divider>
			<!-- 出行日期 -->
			<view v-if="lineType != 5" class="trip">
				<view class="trip-1">
					出行日期
				</view>
				<view class="trip-date">
					{{ storageData.startTime }}
				</view>
			</view>
			<!-- 分割线 -->
			<tui-divider v-if="lineType != 5" height="35"></tui-divider>
			<view class="travel-time">
				<view class="travel-time1">
					行程时间
				</view>
				<view class="travel-time2">{{ storageData.planTime }}</view>
			</view>
		</view>
		<!-- 类型 -->
		<view class="lineTypeBox">
			<view v-if="lineType == 1" class="text">跟团游</view>
			<view v-else-if="lineType == 2" class="text">拼团游</view>
			<view v-else-if="lineType == 3" class="text">研学</view>
			<view v-else-if="lineType == 4" class="text">亲子团游</view>
			<view v-else-if="lineType == 5" class="text">自助亲朋行</view>
			<view class="PinyinBox">
				<view v-if="lineType == 2" class="Pinyin">
					<view class="PinyinText">
						已拼:
					</view>
					<view class="PinyinLeft">
						{{ storageData.nowCount }}
					</view>
					<view class="PinyinRight">
						/{{ storageData.allCount }}
					</view>
				</view>
				<view class="rightBox">
					<u-icon color="#fff" name="checkbox-mark" size="18"></u-icon>
				</view>
			</view>

		</view>
		<!-- 出行人数 -->
		<view class="NumberOfTravelers">
			<view class="NumberOfTravelers-text">出行人数</view>
			<tui-numberbox :value="value" @change="change"></tui-numberbox>
		</view>
		<!-- 自助路线-负责人 -->
		<view v-if="lineType == 5" class="TouristInformation">
			<view class="TouristInformation-1">
				<view class="TouristInformation-text">填写负责人信息</view>
				<!-- <view class="TouristInformation-icon">
          <tui-icon name="wechat" size="25" color="#00D267"></tui-icon>
        </view>
        <view class="TouristInformation-text2">邀请好友填写</view> -->
			</view>
			<!-- 需填10位 -->
			<view class="">
				<view class="formBox">
					<view class="formItem">
						<view class="itemLeft">
							姓名
						</view>
						<u--input v-model="guildName" border='none' placeholder="必填,输入负责人姓名">
						</u--input>
					</view>
					<view class="formItem">
						<view class="itemLeft">
							手机号
						</view>
						<u--input v-model="guildTel" border='none' placeholder="必填,输入负责人手机号">
						</u--input>
					</view>
					<view class="formItem">
						<view class="itemLeft">
							身份证
						</view>
						<u--input v-model="guildIdCard" border='none' placeholder="输入负责人身份证号">
						</u--input>
					</view>
				</view>
			</view>


		</view>
		<!-- 游客信息 -->
		<view class="TouristInformation">
			<view class="TouristInformation-1">
				<view class="TouristInformation-text">填写游客信息</view>
				<!-- <view class="TouristInformation-icon">
          <tui-icon name="wechat" size="25" color="#00D267"></tui-icon>
        </view>
        <view class="TouristInformation-text2">邀请好友填写</view> -->
			</view>
			<!-- 需填10位 -->
			<view v-if="value == 1" class="">
				<view class="formBox">
					<view class="formItem">
						<view class="itemLeft">
							姓名
						</view>
						<u--input v-model="name" border='none' placeholder="必填,输入游客姓名">
						</u--input>
					</view>
					<view class="formItem">
						<view class="itemLeft">
							身份证
						</view>
						<u--input v-model="idCard" :placeholder="placeholderText" border='none'>
						</u--input>
					</view>
					<view class="formItem">
						<view class="itemLeft">
							手机号
						</view>
						<u--input v-model="tel" :placeholder="phoneText" border='none'>
						</u--input>
					</view>
					<view v-if="lineType == 3" class="formItem">
						<view class="itemLeft">
							家长手机号
						</view>
						<u--input v-model="parentTel" :placeholder="ParentsText" border='none'>
						</u--input>
					</view>
				</view>
			</view>
			<view v-if="value > 1" class="">
				<view class="quantity">
					需填
					<text>{{ value }}</text>
					位
				</view>

				<view class="verticalLayout">
					<!-- 显示游客名 -->
					<view v-for="(item,index) in Visitor" :key="index" class="visitors">
						<view class="visitorsItem  visitorsShow">
							<view class="itemName">
								{{ item.name }}
							</view>
							<view class="visitorsIcon" @click="VisitorIndex(index)">
								<u-icon color="#c5221f" name="close-circle-fill" size="16"></u-icon>
							</view>
						</view>
					</view>
					<!-- 新增游客 -->
					<view class="visitors">
						<view v-if="value > Visitor.length" class="visitorsItem" @click="plainEvent">
							<view class="itemName">
								新增
							</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>


		</view>

		<!-- 可选项目 -->
		<!-- <view class="OptionalItem">
      <view class="OptionalItemTitle">
        项目
      </view>
      <view class="" v-for="(item,index) in storageData.charges" :key="index">
        <view class="setMeal">
          <text class="setMeal-1"> {{item.chargeName}}</text>
          <text class="setMeal-2">¥ 60/人</text>
          <tui-numberbox :value="value" @change="change2" :disabled="true"></tui-numberbox>
        </view>
      </view>
    </view> -->

		<!-- 研学确定责任书 -->
		<view v-if="lineType == 3" class="responsibilityBox">
			<view class="title">
				确认责任书
			</view>
			<view class="responsibilityItem">
				<view class="responsibilityValue" @click="letterEvent(1)">
					安全确认书
				</view>
				<view class="responsibilityText">
					已阅读并确认
				</view>
				<view v-if="securityBoole" class="responsibilityCan" @click="securityBoole = !securityBoole">
					<u-icon color="#fff" name="checkbox-mark" size="22"></u-icon>
				</view>
				<view v-else class="responsibilityNot" @click="securityBoole = !securityBoole">

				</view>
			</view>
			<view class="responsibilityItem">
				<view class="responsibilityValue" @click="letterEvent(2)">
					家长确认书
				</view>
				<view class="responsibilityText">
					已阅读并确认
				</view>
				<view v-if="ParentsBoole" class="responsibilityCan" @click="ParentsBoole = !ParentsBoole">
					<u-icon color="#fff" name="checkbox-mark" size="22"></u-icon>
				</view>
				<view v-else class="responsibilityNot" @click="ParentsBoole = !ParentsBoole">

				</view>
			</view>
		</view>
		<view class="separateBox">

		</view>

		<view class="payment">
			<view class="paymentFee">
				<view class="totalPrice">总价 ¥</view>
				<view class="wordSize">{{ storageData.lineFee * value }}</view>
			</view>

			<!-- <view class="detail">明细
      </view>
      <view class="icon">
        <tui-icon name="arrowup"></tui-icon>
      </view> -->
			<view class="payment-1" @click="payClick">
				确认支付
			</view>
		</view>
	</view>
</template>

<script>
	import {
		hotPlanLinePayDetail,
		groupSharingItinerary,
		getSign,
		postOrder
	} from "@/api/challenge";

	export default {
		data() {
			return {
				value: 1,
				value2: 1,
				value3: 1,
				value4: 1,
				Visitor: [],
				number: 10,
				proposalId: '',
				storageData: '',
				lineType: '',
				securityBoole: false,
				ParentsBoole: false,
				loadingTips: false,
				placeholderText: '输入游客身份证号',
				phoneText: '与家长手机号必填其中一个',
				ParentsText: '与手机号必填其中一个',
				name: '',
				tel: '',
				idCard: '',
				parentTel: '',
				telNum: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/,
				validateBoole: false,
				guildTel: '',
				guildName: '',
				guildIdCard: ''
			}
		},
		onLoad(data) {
			console.log('输出data', data);
			this.proposalId = data.id
			this.lineType = data.lineType
			hotPlanLinePayDetail({
				proposalId: data.id
			}).then(res => {
				console.log('输出', res);
				this.storageData = res
			})
			this.Visitor = []
			uni.setStorageSync("Visitor", this.Visitor);
			if (data.lineType == 3) {
				this.placeholderText = '必填,输入游客身份证号'
				this.phoneText = '输入手机号'
				this.ParentsText = '必填,请输入家长手机号'
			}

			if (data.lineType != 2 && data.lineType != 3) {
				this.phoneText = '必填,输入手机号'
			}
		},
		onShow() {
			this.Visitor = uni.getStorageSync("Visitor")
		},
		methods: {
			VisitorIndex(index) {
				this.Visitor.splice(index, 1)
			},
			letterEvent(data) {
				if (data == 1) {
					var imgList = []
					this.storageData.photos1.forEach(item => {
						imgList.push(item.img)
					})
					uni.previewImage({
						current: imgList,
						urls: imgList
					})
				} else {
					var imgList = []
					this.storageData.photos2.forEach(item => {
						imgList.push(item.img)
					})
					uni.previewImage({
						current: imgList,
						urls: imgList
					})
				}

			},
			change: function(e) {
				this.value = e.value
			},
			change2: function(e) {
				this.value2 = e.value
			},
			change3: function(e) {
				this.value3 = e.value
			},
			change4: function(e) {
				this.value4 = e.value
			},
			plainEvent() {
				uni.setStorageSync("Visitor", this.Visitor);
				uni.navigateTo({
					url: '/pages/PopularRoute/fillIn?lineType=' + this.lineType
				})
			},
			payClick() {
				if (this.value == 1) {
					this.TouristVerification()
					if (this.validateBoole == true) {
						if (this.lineType == 3) {
							if (this.securityBoole == false) {
								this.toast('请确认勾选安全确认书');
							} else if (this.ParentsBoole == false) {
								this.toast('请确认勾选家长确认书');
							} else {
								this.sumbitEvent()
							}
						} else if (this.lineType == 5) {
							if (this.guildName == "") {
								this.toast('请输入负责人姓名');
							} else if (this.guildTel == "") {
								this.toast('请输入负责人手机号');
							} else if (!this.telNum.test(this.guildTel)) {
								this.toast('请输入正确的负责人手机号');
							} else {
								this.sumbitEvent()
							}
						} else {
							this.sumbitEvent()
						}
					}
				} else {
					if (this.Visitor.length != this.value) {
						this.toast('出行人数与已填写的游客信息数量不一致');
					} else {
						if (this.lineType == 3) {
							if (this.securityBoole == false) {
								this.toast('请确认勾选安全确认书');
							} else if (this.ParentsBoole == false) {
								this.toast('请确认勾选家长确认书');
							} else {
								this.sumbitEvent()
							}
						} else if (this.lineType == 5) {
							if (this.guildName == "") {
								this.toast('请输入负责人姓名');
							} else if (this.guildTel == "") {
								this.toast('请输入负责人手机号');
							} else if (!this.telNum.test(this.guildTel)) {
								this.toast('请输入正确的负责人手机号');
							} else {
								this.sumbitEvent()
							}
						} else {
							this.sumbitEvent()
						}
					}
				}

			},
			TouristVerification() {
				if (this.name == "") {
					this.toast('请输入游客姓名');
				} else {
					if (this.lineType == 3) {
						if (this.idCard == "") {
							this.toast('请输入游客身份证号');
						} else if (!this.$filter.meetsID(this.idCard)) {
							this.toast('请输入正确游客身份证号');
						} else if (this.parentTel == "") {
							this.toast('请输入家长手机号');
						} else if (!this.telNum.test(this.parentTel)) {
							this.toast('请输入正确的家长手机号');
						} else {
							this.validateEvent()
						}
					} else {
						if (this.idCard != "") {
							if (!this.$filter.meetsID(this.idCard)) {
								this.toast('请输入正确游客身份证号');
							} else {
								this.validateEvent()
							}
						} else {
							this.validateEvent()
						}

					}
				}
			},
			validateEvent() {
				if (this.tel == "" && this.parentTel == "") {
					this.toast('请输入手机号');
				} else if (this.tel != "") {
					if (!this.telNum.test(this.tel)) {
						this.toast('请输入正常的手机号');
					} else {
						this.Visitor = []
						this.Visitor.push({
							name: this.name,
							tel: this.tel,
							idCard: this.idCard,
							parentTel: this.parentTel,
						})
						uni.setStorageSync("Visitor", this.Visitor);
						this.validateBoole = true
					}
				} else if (this.parentTel != "") {
					if (!this.telNum.test(this.parentTel)) {
						this.toast('请输入正常的手机号');
					} else {
						this.Visitor = []
						this.Visitor.push({
							name: this.name,
							tel: this.tel,
							idCard: this.idCard,
							parentTel: this.parentTel,
						})
						uni.setStorageSync("Visitor", this.Visitor);
						this.validateBoole = true
					}
				}
			},
			sumbitEvent() {
				var that = this
				this.loadingTips = true
				var orderItems = []
				this.storageData.charges.forEach(item => {
					orderItems.push({
						pathChargeId: item.id,
						payCount: this.value
					})
				})
				groupSharingItinerary({
					proposalId: this.proposalId,
					tel: uni.getStorageSync("userinfo").phone,
					proposalUnPays: this.Visitor,
					orderItems: orderItems,
					guildTel: this.guildTel,
					guildName: this.guildName,
					guildIdCard: this.guildIdCard
				}).then(res => {
					this.loadingTips = false
					console.log('输出下单', res);

					getSign({
						prepayId: res.prepayId,
						// // 聚力
						appId: "wx5b3843197d34d53b",
					}).then(params => {
						wx.requestPayment({
							timeStamp: params.data.timeStamp,
							nonceStr: params.data.nonceStr,
							package: params.data.package,
							signType: params.data.signType,
							paySign: params.data.paySign,
							success: function(successres) {
								postOrder({
									orderSn: res.orderNum,
									orderAmount: 1,
									payStatus: 1,
								}).then((completeres) => {
									console.log("查询完成", completeres);
								});
								uni.reLaunch({
									url: '/pages/PopularRoute/payStatus?type=1&lineType=' +
										that.lineType + '&orderType=1'
								})
							},
							fail: function(failres) {
								console.log(failres);
								uni.reLaunch({
									url: '/pages/PopularRoute/payStatus?type=2&lineType=' +
										that.lineType + '&orderType=1'
								})
							},
							complete: function(completeres) {
								console.log("完成", completeres);
							},
						});
					})

				}).catch(err => {
					this.loadingTips = false
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.Routebrief {
		margin-top: 40rpx;
		padding-left: 40rpx;
		padding-top: 40rpx;
		padding-right: 40rpx;
		background-color: #ffff;
		padding-bottom: 30rpx;
		border-radius: 20rpx;
		width: 80%;
	}

	.Routebrief tui-tag {
		padding-left: 5rpx;
	}

	.travelContainer {
		display: flex;
		justify-content: space-between;
	}

	.HeadPortrait-text {
		display: flex;

	}

	.HeadPortrait image {
		height: 50rpx;
		width: 50rpx;
	}

	.HeadPortrait-text {
		display: flex;

	}

	.time {
		color: #FF0000;
		padding-left: 180rpx;
	}

	.travel-time2 {
		padding-left: 230rpx;
	}

	.itinerary {
		width: 100%;
		background-color: #ffff;
	}

	.tab-1 {
		background-color: #ffff;
		margin-top: 20rpx;
	}

	.trip {
		display: flex;
		justify-content: space-between;
	}

	.trip-date {}

	.travel-time {
		display: flex;
		justify-content: space-between;
	}

	.travel-time2 {
		padding-left: 230rpx;
	}

	.content {
		background-color: #F2F2F2;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.picture {
		width: 152rpx;
		height: 152rpx;
	}

	.picture image {
		width: 100%;
		height: 100%;
		border-radius: 15rpx;
	}

	.picture-title-price {
		display: flex;
		flex-direction: row;
	}

	.title-price {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 20rpx;
		padding: 6rpx 0;

		.title {
			font-weight: 800;
		}

		.price {
			padding-top: 20rpx;
			color: #FF0000;
		}
	}


	.Grouptravel {
		display: flex;
		align-items: center;
		margin-top: 40rpx;
		background-color: #ffff;
		width: 90%;
		height: 100rpx;
		border-radius: 20rpx;
	}

	.Grouptravel-1 {
		padding-left: 40rpx;
		font-size: 35rpx;
	}

	.Grouptravel-1,
	.Grouptravel-3,
	.Grouptravel-4,
	.Grouptravel-5,
	.Grouptravel-2 {
		padding-top: 15rpx;
	}

	.Grouptravel-2 {
		padding-left: 260rpx;
		color: #AAAAAA;
	}

	.Grouptravel-3 {
		color: #4286F5;
		font-size: 45rpx;
	}

	.Grouptravel-4 {
		color: #AAAAAA;
	}

	.Grouptravel-5 {
		padding-left: 30rpx;
	}

	.NumberOfTravelers-text {
		padding-left: 40rpx;

		font-weight: 800;
	}

	.lineTypeBox {
		margin-top: 40rpx;
		background-color: #ffff;
		width: 90%;
		display: flex;
		height: 100rpx;
		border-radius: 20rpx;
		align-items: center;
		justify-content: space-between;

		.text {
			margin-left: 40rpx;
			font-weight: 800;
		}

		.PinyinBox {
			display: flex;
			align-items: center;

			.Pinyin {
				display: flex;
				align-items: center;
				margin-right: 20rpx;

				.PinyinText {
					font-size: 28rpx;
					color: #aaaaaa;
					margin-right: 10rpx;
				}

				.PinyinLeft {
					font-size: 36rpx;
					font-weight: 800;
					color: #4186f5;
				}

				.PinyinRight {
					font-size: 36rpx;
					color: #757575;
				}
			}
		}

		.rightBox {
			width: 36rpx;
			height: 36rpx;
			background: #4186f5;
			border-radius: 50%;
			margin-right: 40rpx;
		}
	}

	.NumberOfTravelers {
		margin-top: 40rpx;
		background-color: #ffff;
		width: 90%;
		display: flex;
		height: 100rpx;
		border-radius: 20rpx;
		align-items: center;
	}

	.NumberOfTravelers tui-numberbox {
		padding-left: 310rpx;
	}

	.TouristInformation {
		margin-top: 40rpx;
		background-color: #ffff;
		width: 90%;
		display: flex;
		flex-direction: column;
		// height: 280rpx;
		border-radius: 20rpx;

		.formBox {
			width: 672rpx;
			background: #ffffff;
			border-radius: 10px;
			margin: auto;

			.formItem {
				padding: 18rpx 0rpx;
				margin: 0 20rpx 0 40rpx;
				display: flex;
				border-bottom: 2rpx solid #eeeeee;
				font-size: 28rpx;

				.itemLeft {
					width: 200rpx;
				}
			}
		}
	}

	.TouristInformation-1 {
		display: flex;
	}

	.TouristInformation-text {
		padding-left: 40rpx;

		font-weight: 800;

	}

	.TouristInformation-text2 {
		color: #4286F5;
		font-size: 30rpx;
	}

	.TouristInformation-icon {
		padding-left: 180rpx;
	}

	.TouristInformation-1 {
		margin-top: 40rpx;
	}

	.quantity {
		padding-left: 45rpx;
		padding-top: 20rpx;
	}

	.quantity text {
		color: #FF0000;
	}

	.visitors {
		padding: 0rpx 20rpx 18rpx 0;

		.visitorsItem {
			padding: 16rpx 10rpx 16rpx 20rpx;
			border: 2rpx solid #dddddd;
			border-radius: 8rpx;
			position: relative;
			display: flex;

			.itemName {
				font-size: 28rpx;
				color: #212121;
			}

			.visitorsIcon {
				position: absolute;
				top: -14rpx;
				right: -14rpx;
				// border: 2rpx solid #c5221f;
				// border-radius: 50%;
			}
		}

		.visitorsShow {
			padding-right: 20rpx;
		}
	}

	.addVisitor {
		padding: 0rpx 15rpx 18rpx 0;
	}

	.verticalLayout {
		display: flex;
		flex-wrap: wrap;
		margin-left: 45rpx;
		margin-top: 20rpx;
	}

	.OptionalItem {
		margin-top: 40rpx;
		background-color: #ffff;
		width: 90%;
		display: flex;
		flex-direction: column;
		border-radius: 20rpx;
		padding-bottom: 20rpx;
	}

	.OptionalItemTitle {
		margin-left: 45rpx;
		margin-top: 40rpx;

		font-weight: 800;
	}

	.setMeal {
		margin: 10rpx 45rpx 10rpx 45rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.setMeal-2 {
		padding-left: 150rpx;
		color: #FF0000;
	}

	.setMeal tui-numberbox {
		padding-left: 20rpx;
	}


	.payment {
		margin-top: 45rpx;
		display: flex;
		height: 100rpx;
		align-items: center;
		justify-content: space-between;
		background-color: #ffff;
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 999;

		.paymentFee {
			display: flex;
			align-items: center;

			.totalPrice {
				padding-left: 45rpx;
				color: #FF0000;
			}

			.wordSize {
				color: #FF0000;
				font-size: 45rpx;
				margin-left: 8rpx;
			}
		}

		.payment-1 {
			background-color: #4286F5;
			height: 70rpx;
			border-radius: 40rpx;
			width: 180rpx;
			color: #ffff;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 50rpx;
			margin-right: 40rpx;
		}
	}


	.separateBox {
		padding-bottom: 200rpx;
	}

	.detail {
		padding-left: 150rpx;
		color: #808080;
	}


	.responsibilityBox {
		width: 90%;
		height: 248rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin-top: 40rpx;

		.title {
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC-Heavy;
			font-weight: 800;
			text-align: left;
			color: #212121;
			margin-top: 32rpx;
			margin-left: 40rpx;
		}

		.responsibilityItem {
			display: flex;
			margin: 0rpx 40rpx;
			border-bottom: 2rpx solid #eeeeee;
			padding: 20rpx 0;

			.responsibilityValue {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				color: #4186f5;
				border-bottom: 2rpx solid #4186f5;
				margin-right: 230rpx;
			}

			.responsibilityText {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				margin-right: 10rpx;
			}

			.responsibilityNot {
				width: 40rpx;
				height: 40rpx;
				background: #ffffff;
				border: 3rpx solid #dddddd;
			}

			.responsibilityCan {
				width: 40rpx;
				height: 40rpx;
				background: #0268fd;
				border: 3rpx solid #0268fd;
			}

		}
	}
</style>